import { defineComponent, onMounted, ref } from "vue";
import styles from "./usercent.module.less";
import dayjs from 'dayjs';
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { useStore as useUserStore } from "@/store/user";
import { $personInfo, $savePersonInfo, $userAuthStatus } from "@/api/account/account";
import { $loginUser } from "@/api/login/login";
import validateInstance from "@/libs/validate/validate";
export default defineComponent({
  name:'accountUsercent',
  setup() {
    const router = useRouter();
    const userStore = useUserStore();

    const form = ref({
      realname: '',
      sex: '',
      birthday: '',
      address: '',
      company_name: '',
      company_status: 0,
    })

    const disabledDate = (current: any) => {
      return current && current >= dayjs().endOf('day');
    };

    onMounted(() => {
      $userAuthStatus().then((res: any) => {
        form.value.company_status = res.data?.status || '';
        if (Number(res.data.status) === 20) {
          $loginUser().then((res: any) => {
            form.value.company_name = res.data?.agency?.name || '';
          })
        }
      })
      $personInfo().then((res: any) => {
        form.value.realname = res.data?.real_name || '';
        form.value.sex = res.data?.sex || '';
        form.value.birthday = res.data?.birthday || '';
        form.value.address = res.data?.address || '';
      })
    })

    const rules = {
      realname: [
        { required: true, message: '请输入真实姓名', trigger: 'blur' }
      ],
      birthday: [
        { required: true, message: '请选择出生日期', trigger: 'blur' }
      ],
      address: [
        { required: true, message: '请输入联系地址', trigger: 'blur' }
      ],
    }
    //提交
    const submit = () => {
      if (!validateInstance.test(form.value.realname, "Chinese")) {
        message.error('真实姓名为汉字，请重新输入')
        return;
      }
      if (!form.value.sex) {
        message.error('请选择性别')
        return;
      }
      if (!form.value.birthday) {
        message.error('请选择出生日期')
        return;
      }
      if (!form.value.address) {
        message.error('请输入联系地址')
        return;
      }
      console.log(form.value.birthday)
      $savePersonInfo({
        user_id: Number(userStore.uid),
        real_name: form.value.realname,
        sex: Number(form.value.sex),
        birthday: form.value.birthday,
        address: form.value.address
      }).then((res: any) => {
        message.success('提交成功');
        window.location.reload();
      })
    }

    return () => (
      <div class={styles.usercent}>
        <div class={styles['enterinfo-p']}>
          个人信息
        </div>
        <div class={styles['enterinfo-form-box']}>
          <a-form model={form.value} label-col={{ style: { width: '100px' } }} rules={rules}>
            <a-form-item
              label="用户名"
              name="username"
            >
              <span>{userStore.user_info.username}</span>
            </a-form-item>
            <a-form-item
              label="真实姓名"
              name="realname"
            >
              <a-input style={{ width: '232px' }} placeholder="请输入姓名" v-model:value={form.value.realname} />
            </a-form-item>
            <a-form-item
              label="性别"
              name="sex"
              required
            >
              <a-radio-group v-model:value={form.value.sex} name="radioGroup">
                <a-radio value={1}>男</a-radio>
                <a-radio value={2}>女</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="出生日期"
              name="birthday"
            >
              <a-date-picker disabled-date={disabledDate} style={{ width: '232px' }} valueFormat="YYYY-MM-DD" placeholder="选择日期" v-model:value={form.value.birthday} />
            </a-form-item>
            <a-form-item
              label="联系地址"
              name="address"
            >
              <a-input style={{ width: '580px' }} placeholder="请输入详细地址" v-model:value={form.value.address} />
            </a-form-item>
          </a-form>
          <div class={styles['company-entry']}>
            <div class={styles['company-label']}>企业名称</div>
            <div class={styles['company-content']}>{form.value.company_name || <span>通过企业认证后，可以企业身份投保旅游团体意外险，并享受企业服务</span>}</div>
            <div class={styles['company-status']}>{
              form.value.company_status === 20 ? <span>已认证</span> : <span onClick={() => { router.push('/account/Qyinform') }}>企业实名认证</span>
            }</div>
          </div>
          <div class={styles['submit-btn']} onClick={() => { submit() }}>确认提交</div>
        </div>
      </div>
    )
  }
})